<template>
  <div>
    <homeMenu/>
    <div class="qs-top-box">
      <div>
        <!-- <img src="../assets/images/newHome/question-icon.svg" alt=""> -->
        <span>{{$t('user.QA')}}</span>
      </div>
    </div>
    <div class="qs-middle-box">
      <div class="qs-middle-box1200">
        <a-collapse v-for="(val,index) in listQs" :key="index" :style="index == listQs.length-1?'border-bottom: 2px solid rgba(255,255,255,.3);':''">
          <img class="qs-img" src="../assets/common-icon-select.png" alt="">
          <a-collapse-panel v-show="val.text" :header="val.header"  :show-arrow="false">
            <p>
              {{ val.text }}
            </p>
          </a-collapse-panel>
          <a-collapse-panel v-show="!val.text" :header="val.header"  :show-arrow="false">
            <p>
              <div class="qs-text">
                <div>{{$t('user.incomeiscalcula')}}</div>
                <img src="../assets/Q&A-img-formula.png" alt="">
              </div>
              <div class="qs-magintext">{{$t('user.numberofNb')}}</div>
              <div class="qs-magintext">{{$t('user.percentagwil')}}</div>
              <div class="qs-magintext">{{$t('user.proportioninfluence')}}</div>
              <img class="qs-baifen" src="../assets/pc_baifen.png" alt="">
              <div class="qs-magintext">{{$t('user.Cccelerationossib')}}</div>
            </p>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
    <homeFooter/>
  </div>
</template>

<script>
import homeMenu from './public/homeMenu'
import homeFooter from './public/homeFooter'
export default {
  name: 'newNavQs',
  components:{
    homeFooter,
    homeMenu
  }, 
  data () {
    return {
      
    }
  }, 
  computed: {
    listQs(){
      return [
        {header:this.$t('user.HowcanI'),text:this.$t('user.needTronLink')},
        {header:this.$t('user.notdisplaying'),text:this.$t('user.jusakeyour')},
        {header:this.$t('user.delaysindispl'),text:this.$t('user.delayinisplayi')},
        {header:this.$t('user.longwi'),text:this.$t('user.poolhas7')},
        {header:this.$t('user.beliste'),text:this.$t('user.Yes')},
        {header:this.$t('user.harvestandun'),text:this.$t('user.betransferredt')},
        {header:this.$t('user.doestheea'),text:this.$t('user.equallydistrib')},
        {header:this.$t('user.Whatisaccelerat'),text:this.$t('user.Accelerationto')},
        {header:this.$t('user.theaccelera'),text:''},
      ]
    }
  },
  mounted() {
  },
  methods: {
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .qs-middle-box{
    background-color: #000;
  }
  .qs-middle-box1200 /deep/ .ant-collapse-item-active{
    >div:nth-child(1){
      color: #FEDD4F;
    }
  }
 @media only screen and (min-width: 0px) and (max-width: 639px){
  .qs-middle-box1200 /deep/ .ant-collapse-header{
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    padding: 23px 0px;
  }
  .qs-middle-box1200 /deep/ .ant-collapse-header:hover{
    color: #FEDD4F;
  }
 .qs-middle-box1200 /deep/ .ant-collapse-content-box{
   color: #fff;
   font-size: 16px;
   line-height: 22px;
   padding-bottom: 35px;
 }
 .qs-magintext{
   font-size: 14px;
   margin-bottom: 19px;
   line-height: 28px;
 }
 .qs-text{
   text-align: left;
   font-size: 14px;
   padding: 12px 0px 36px 0px;
   img{
     width: 100%;
     margin-top: 30px;
   }
 }
 .qs-baifen{
   width: 100%;
   margin-top: 10px;
   margin-bottom: 25px;
 }
  .qs-top-box{
    width: 100%;
    /* background-image: url('../assets/images/newHome/qs-bg1.jpg'); */
    text-align: center;
    padding-top: 100px;
    padding-bottom: 0px;
    >div{
      >img{
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }
      >span{
        font-size: 34px;
        font-weight: bold;
        color: #fff;
      }
    }
  }
  .qs-middle-box1200{
    width: 100%;
    padding: 0px 20px;
    padding-top: 64px;
    text-align: left;
    .qs-img{
      float: right;
      margin-top: 26px;
    }
  }

 }

 @media only screen and (min-width: 640px) {
  .qs-middle-box1200 /deep/ .ant-collapse-header{
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    padding: 23px 0px;
  }
  .qs-middle-box1200 /deep/ .ant-collapse-header:hover{
    color: #FEDD4F;
  }
 .qs-middle-box1200 /deep/ .ant-collapse-content-box{
   color: #fff;
   font-size: 16px;
   line-height: 22px;
   padding-bottom: 35px;
 }
 .qs-magintext{
   font-size: 14px;
   margin-bottom: 19px;
   line-height: 28px;
 }
 .qs-text{
   text-align: left;
   font-size: 14px;
   padding: 12px 0px 36px 0px;
   img{
     width: 504px;
     margin-top: 30px;
   }
 }
 .qs-baifen{
   width: 660px;
   margin-top: 10px;
   margin-bottom: 25px;
 }
    .qs-top-box{
      width: 100%;
      /* background-image: url('../assets/images/newHome/qs-bg1.jpg'); */
      text-align: center;
      padding-top: 140px;
      padding-bottom: 0px;
      >div{
        >img{
          width: 60px;
          height: 60px;
          margin-right: 10px;
        }
        >span{
          font-size: 34px;
          font-weight: bold;
          color: #fff;
        }
      }
    }
    .qs-middle-box1200{
      width: 800px;
      margin: 0 auto;
      padding-top: 64px;
      text-align: left;
      .qs-img{
        float: right;
        margin-top: 26px;
      }
    }
 }
 
 .qs-middle-box1200 /deep/ .ant-collapse-item{
   border:none;
   background-color: #000;
 }
 .qs-middle-box1200 /deep/ .ant-collapse{
    border:none;
    border-top: 2px solid rgba(255,255,255,.3);
 }
 .qs-middle-box1200 /deep/ .ant-collapse-content{
  border:none;
 }
</style>
